<template>
  <el-dialog :before-close="handleClose"
             :close-on-click-modal="false"
             :visible="prePayDialogVisible"
             title="预付款"
             width="500px"
             @close="handleClose">
    <el-form ref="dataFormRef" :model="dataForm" :rules="rules" label-width="100px" @keyup.enter.native="handleConfirm">
      <el-form-item label="油枪号：" prop="gunNo">
        <el-row :gutter="10">
          <el-col :span="15">
            <el-select v-model="dataForm.gunNo" placeholder="请选择" @change="handleGunSelect">
              <el-option v-for="item in gunList" :key="item.id"
                         :label="item.gunNo + ' 号枪【' + item.fuelName +  ' ' + item.fuelPrice + '】'"
                         :value="item.gunNo"></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-input ref="gunNoRef" v-model="dataForm.gunNo" type="number" @change="handleGunSelect"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="升数：" prop="litre">
        <el-input v-model="dataForm.litre" @input="computeAmount"></el-input>
      </el-form-item>
      <el-form-item label="金额：" prop="amount">
        <el-input v-model="dataForm.amount" @input="computeLitre"></el-input>
      </el-form-item>
    </el-form>
    <div class="footer-btn">
      <el-button type="primary" @click="handleConfirm">确定[Enter]</el-button>
      <el-button @click="closeDialog">取消[Esc]</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {mapGetters} from 'vuex'
import moment from 'moment'

export default {
  name: 'PrePayDialog',
  computed: {
    ...mapGetters([
      'prePayDialogVisible',
      'stationId',
      'operator',
      'gunList',
      'fuelList',
      'chosenGun'
    ])
  },
  data () {
    return {
      gunInfo: {},
      dataForm: {
        gunNo: '',
        litre: '',
        amount: ''
      },
      rules: {
        gunNo: {required: true, message: '请选择枪号', trigger: 'change'},
        litre: {required: true, message: '升数不能为空', trigger: 'change'},
        amount: {required: true, message: '油机金额不能为空', trigger: 'change'}
      }
    }
  },
  methods: {
    handleClose () {
      console.log('handleClose')
      this.$refs['dataFormRef'].resetFields()
      this.$store.dispatch('hidePrePayDialog')
    },
    closeDialog () {
      this.$store.dispatch('hidePrePayDialog')
    },
    handleConfirm () {
      console.log('handleConfirm')
      console.log(this.dataForm)
      this.$refs['dataFormRef'].validate((valid) => {
        if (valid) {
          var gunInfo = this.gunList.filter(item => item.gunNo === this.dataForm.gunNo)[0]
          var litre = (parseFloat(this.dataForm.amount) / parseFloat(gunInfo.fuelPrice)).toFixed(2)
          // 组装一条预付款加油记录，添加到购物车中
          var prePayRecord = {
            id: this.stationId + ':' + this.dataForm.gunNo + ':' + moment().format('YYYYMMDDHHmmssSSS') + '-A',
            amount: this.dataForm.amount,
            fuelName: gunInfo.fuelName,
            gunNo: this.dataForm.gunNo,
            litre: litre,
            tankNo: gunInfo.tankNo,
            stationId: this.stationId,
            startTime: moment().format('YYYY-MM-DD HH:mm:ss'),
            endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
            price: gunInfo.fuelPrice,
            operator: this.operator
          }
          console.log(prePayRecord)
          this.$store.dispatch('addToCartList', prePayRecord)
          this.$store.dispatch('showCartDialog')
          this.$store.dispatch('hidePrePayDialog')
        }
      })
    },
    handleGunSelect (data) {
      console.log('handleGunSelect')
      this.gunInfo = this.gunList.filter(item => item.gunNo === data)[0]
      console.log(this.gunInfo)
      this.dataForm.litre = ''
      this.dataForm.amount = ''
    },
    // 输入金额计算升数
    computeLitre () {
      console.log('computeLitre')
      if (this.dataForm.amount && this.dataForm.gunNo && this.gunInfo.fuelPrice) {
        this.dataForm.litre = (parseFloat(this.dataForm.amount) / parseFloat(this.gunInfo.fuelPrice)).toFixed(2)
      } else {
        this.dataForm.litre = ''
      }
    },
    // 输入升数计算金额
    computeAmount () {
      console.log('computeAmount')
      if (this.dataForm.litre && this.dataForm.gunNo && this.gunInfo.fuelPrice) {
        this.dataForm.amount = (parseFloat(this.dataForm.litre) * parseFloat(this.gunInfo.fuelPrice)).toFixed(2)
      } else {
        this.dataForm.amount = ''
      }
    }
  },
  watch: {
    chosenGun (newVal, oldVal) {
      if (newVal) {
        this.dataForm.gunNo = newVal
        this.handleGunSelect(this.dataForm.gunNo)
        setTimeout(() => {
          this.$nextTick(() => {
            if (this.prePayDialogVisible) {
              this.$refs['gunNoRef'].focus()
            }
          })
        }, 300)
      }
    }
  }
}
</script>
<style scoped>
.footer-btn {
  text-align: center;
}
</style>